<template>
  <div>
    <el-form ref="ruleFormRef" :model="loginForm" :rules="rules" label-width="75px" class="demo-ruleForm" :size="formSize"
      status-icon>
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="loginForm.username" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="loginForm.password" show-password />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          登录
        </el-button>
        <el-button @click="toRegister()">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed } from 'vue'
import { ElNotification, type FormInstance, type FormRules } from 'element-plus'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import api from '@/api'

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const loginForm = ref({
  username: '',
  password: '',
})

const rules = reactive<FormRules>({
  username: [
    {
      required: true,
      message: '用户名不能为空',
      trigger: 'change',
    },
  ],
  password: [
    {
      required: true,
      message: '密码不能为空',
      trigger: 'change',
    },
  ],
})

const store = useStore();
const router = useRouter();

const user = ref({
  id: '',
  userName: '',
  nickName: '',
  userType: '',
  avatar: '',
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      api.login.userlogin(loginForm.value)
        .then(response => {
          // 在这里可以处理提交成功后的逻辑
          // 存储 token
          store.dispatch('updateToken', response.data.data.token)
          user.value.id = response.data.data.id;
          user.value.userName = response.data.data.userName;
          user.value.nickName = response.data.data.nickName;
          user.value.userType = response.data.data.userType;
          user.value.avatar = response.data.data.avatar;
          store.dispatch('updateUserInfo', user.value);
          store.dispatch('updateIsLoggedIn', true);
          ElNotification({
            title: 'Success',
            message: response.data.msg,
            type: 'success',
            duration: 1500
          })
          if (user.value.userType === '2') {
            router.push('/')
          } else if (user.value.userType === '1') {
            router.push('/admin')
          }

        })
        .catch(error => {
          ElNotification({
            title: 'Error',
            message: error.data.msg,
            type: 'error',
            duration: 1500
          })
          // 在这里可以处理提交失败后的逻辑
        });
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const toRegister = () => {
  router.push('/register')
}

</script>

<style scoped></style>